<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120"
    >
      <el-form-item label="保证金(元)"> {{ formData.securityDeposit }} </el-form-item>
      <el-form-item label="支付密码" prop="payPassword">
        <el-input
          type="password"
          :maxlength="16"
          show-password
          autocomplete="new-password"
          v-model="formData.payPassword"
          placeholder="请输入支付密码"
          style="width: 80%"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="formData.remark" :maxlength="100" placeholder="请输入备注" style="width: 80%"/>
      </el-form-item>
      <div class="funds-info-wrapper">
        <div class="funds-info">
          <div class="balance-line">
            <el-icon class="warning-icon" size="35"><WarningFilled /></el-icon>
            <span><span style="font-weight: bold;">可用资金余额</span>：{{ formatCurrency(formData.availableFunds) }}元</span>
          </div>
          <div class="tips-line">
            温馨提示：请确保账户可用资金足够支付保证金，如果已经打款，请及时
            <span class="recharge-link" @click="handleRechargeClick">申请充值</span>
          </div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="resetFn">重 置</el-button>
    </template>
  </Dialog>
  <RechargeModel ref="rechargeModel" @success="recharge"></RechargeModel>
</template>
<script lang="ts" setup>
import * as hall from '@/api/hall'
import RechargeModel from '@/views/bidManage/financial/accountManage/rechargeModel.vue'
const emit = defineEmits(['success','recharge'])
const formRef = ref()
const { t } = useI18n()
const message = useMessage()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const rechargeModel = ref()
const overView: Record<string, any> = ref({})
const formData: Record<string, any> = ref({
  id: undefined,
  securityDeposit: undefined,
  payPassword: undefined,
  remark: undefined,
  availableFunds: undefined
})
const formRules = reactive({
  payPassword: [
    { required: true, message: '支付密码不能为空', trigger: 'blur' },
    { min: 6, max: 16, message: '密码长度6-16位', trigger: 'blur' }
  ]
})
const formatCurrency = (value: number | undefined) => {
  if (value === undefined || value === null) {
    return '0.00'
  }
  return Number(value).toFixed(2)
}
const handleRechargeClick = () => {
  dialogVisible.value = false
  rechargeModel.value.open(overView.value || {})
}

const open = async (data: Record<string, any>) => {
  clearFormData()
  dialogVisible.value = true
  dialogTitle.value = '申请报名'
  formData.value.id = data.id
  formData.value.securityDeposit = data.securityDeposit
  getAvailableFunds()
}
const getAvailableFunds = async () => {
  try {
    const data = await hall.getAvailableFunds()
    formData.value.availableFunds = data.availableFunds
    delete data.availableFunds
    delete data.bond
    overView.value = data
  } catch (error) {
    console.log(error)
  }
}
const submitForm = async () => {
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  try {
    formLoading.value = true
    await hall.sessionSlaveManageSignUp(formData.value)
    message.success(t('common.operateSuccess'))
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const resetFn = () => {
  formData.value.payPassword = undefined
  formData.value.remark = undefined
  formRef.value?.resetFields()
}

const clearFormData = () => {
  formData.value = {
    id: undefined,
    securityDeposit: undefined,
    payPassword: undefined,
    remark: undefined,
    availableFunds: undefined
  }
  formRef.value?.resetFields()
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.funds-info-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.funds-info {
  background: rgba(230, 162, 60, 0.10);
  border-radius: 4px;
  padding: 12px 16px;
  width: 85%;
  font-size: 14px;
  font-family: "PingFang SC", "PingFang SC-400";
  font-weight: 400;
  text-align: left;
  color: #e6a23c;
  line-height: 1.5;
}

.balance-line {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.warning-icon {
  //background-color: #E6A23C;
  //color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tips-line {
  word-wrap: break-word;
  word-break: break-word;
}

.recharge-link {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
</style>
